<template>
  <view class="manage_analyze">
    <!-- 顶部导航栏 -->
    <view v-show="isHaveStore == 1">
      <view class="topNavBox">
        <view class="topNav common-tab">
          <view class="navItem common-tab-text" :class="{active:i.index == tabNum,text:i.index == tabNum}" v-for="(i,index) in navList" :key = 'index' @click="handelTabItem(i)">{{i.item}}</view>
        </view>
      </view>
      <view class="manage-box">
        <!-- 数据展示 -->
        <view class="selectListDiv" v-if="tabNum == 0">
          <view class="selectListBox unlikeblue">
            <text class="yearS" :class="{yearStyle:itemNum == 0}" @click="handelDate(0)">月</text>
            <text class="yearS" :class="{monthStyle:itemNum == 1}" @click="handelDate(1)">年</text>
          </view>
        </view>
        
        <view class="selectListDiv" v-else>
          <view class="selectListBox unlikered">
            <text class="yearS" :class="{yearStyleRed:itemNum == 0}" @click="handelDate(0)">月</text>
            <text class="yearS" :class="{monthStyleRed:itemNum == 1}" @click="handelDate(1)">年</text>
          </view>
        </view>
        <view class="">
          <view class="u_chartBox" v-show="manageForm.dateMap && manageForm.dateMap.length > 0">
            <chart chartType="column" @getDataIndex="getCurrentDataIndex" :opts="columnOption" canvasId="u-column-canvas" ref="columnChart"></chart>
          </view>
          <view class="noChart" v-show="!manageForm.dateMap || manageForm.dateMap.length == 0">暂无数据</view>
        </view>
        <!-- 用户数据 -->
        <view class="userData" v-if="tabNum == 0">
          <view class="userData_top">
            <view class="userData_top_r">
              <text class="txt">收入</text>
              <text class="money" style="margin-left: 33rpx;">{{manageForm.storeTotalMoney}}</text>
            </view>
            <view class="userData_top_l">元</view>
          </view>
          <view class="dataStatus">
            <view class="dataStatusList">
              <view class="datastore itemWire">
                <view class="item_money"><text>￥</text> {{manageForm.storeReceivedMoney}}</view>
                <view class="item_status">已到账</view>
              </view>
              <view class="datastore">
                <view class="item_money"><text>￥</text> {{manageForm.storeSharedMoney}}</view>
                <view class="item_status">回馈顾客</view>
              </view>
              <view class="dataStatusItem itemWire item_margin_top">
                <view class="item_money"><text>￥</text> {{manageForm.storeOrderNumber}}</view>
                <view class="item_status">付款笔数</view>
              </view>
              <view class="dataStatusItem itemWire item_margin_top">
                <view class="item_money"><text>￥</text> {{manageForm.storeOrderPayNumber}}</view>
                <view class="item_status">付款人数</view>
              </view>
              <view class="dataStatusItem item_margin_top">
                <view class="item_money"><text>￥</text> {{manageForm.storeOrderAverageMoney}}</view>
                <view class="item_status">客单价</view>
              </view>
            </view>
          </view>
        </view>
        <view class="userData" v-else>
          <view class="userData_top">
            <view class="userData_top_r">
              <text class="txt">爆品</text>
              <text class="money" style="margin-left: 33rpx;">{{manageForm.hotTotalMoney}}</text>
            </view>
            <view class="userData_top_l">元</view>
          </view>
          <view class="dataStatus">
            <view class="dataStatusList">
              <view class="datastore itemWire" >
                <view class="item_money"><text>￥</text> {{manageForm.hotReceivedMoney}}</view>
                <view class="item_status">核销</view>
                <view class="orderNum">共{{manageForm.hotUsedNumber}}单</view>
              </view>
              <view class="datastore" >
                <view class="item_money"><text>￥</text> {{manageForm.hotNoReceivedMoney}}</view>
                <view class="item_status">待核销</view>
                <view class="orderNum">共{{manageForm.hotNoUsedNumber}}单</view>
              </view>
              <view class="datastore itemWire item_margin_top" >
                <view class="item_money"><text>￥</text> {{manageForm.hotExpiredMoney}}</view>
                <view class="item_status">过期</view>
                <view class="orderNum">共{{manageForm.hotExpiredNumber}}单</view>
              </view>
              <view class="datastore1" >
                <view class="item_money1"><text>￥</text> {{manageForm.hotCostMoney}}</view>
                <view class="item_status">推广成本</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 新老客户对比数据表 -->
        <view class="oldNewClient">
          <view class="allAmountBox" v-if="tabNum == 0">
            <view class="allAmount"><text>{{manageForm.storeClientNumbers}}</text>总客户量</view>
          </view>
          <view class="allAmountBox" v-else>
            <view class="allAmount"><text>{{manageForm.hotClientNumbers}}</text>总客户量</view>
          </view>
          <view class="">
            <chart :cWidth="width" :cHeight="height" chartType="ring" :opts="ringOption" ref="ringChart" canvasId="u-ring-canvas"></chart>
          </view>
        </view>
        <!-- 男女客户对比数据表 -->
        <view class="genderClient">
          <view class="allAmountBox" v-if="tabNum == 0">
            <view class="allAmount"><text>{{manageForm.storeClientNumbers}}</text>总客户量</view>
          </view>
          <view class="allAmountBox" v-else>
            <view class="allAmount"><text>{{manageForm.hotClientNumbers}}</text>总客户量</view>
          </view>
          <view class="">
            <chart :cWidth="width" :cHeight="height" chartType="ring" :opts="sexRingOption" ref="sexRingChart" canvasId="u-sexring-canvas"></chart>
          </view>
        </view>
      </view>
    </view>
    <view class="noDatas" v-show="isHaveStore != 1">
      <image style="width: 340rpx; height: 340rpx;" :src="storeImage" mode=""></image>
      <view class="storeTxt">您尚未开通店铺</view>
      <view class="storeTxt">暂无数据</view>
      <view class="uni-padding-wrap uni-common-mt">
        <button type="primary" @click="storeApprove">店铺认证</button>
      </view>
    </view>
  </view>
</template>

<script>
import chart from '@/components/u-charts/component.vue';
import { analyzeOffline,analyzeHots,analyzeTeam,analyzeProfit } from "@/service/manage/manage.service.js";
import { PersonalCenter } from '@/service/user/user.service.js'
export default {
  components: {
    chart
  },
  data () {
    return {
      navList: [
        {index:'0',item:'到店付'},
        {index:'1',item:'引流爆品'}
      ],
      itemList: [
        {flag:0,name:'月',idx:0},
        {flag:1,name:'年',idx:1},
      ],
      storeImage: this.$store.state.imgBaseUrl + '/storeNull.png',
      tabNum:0,//顶部tab默认值  0到店付 1引流爆品
      itemNum:0, //年月切换默认值 itemNum 1年 0月
      manageForm: {
        storeReceivedMoney: '', // 已到账
        storeUnsettleMoney: '', // 待结算
        storeSharedMoney: '', // 回馈顾客
        storeOrderNumber: '', // 付款笔数
        storeOrderPayNumber: '', // 付款人数
        storeOrderAverageMoney: '', // 客单价
        storeClientAddNumbers: '',// 新顾客
        storeClientOldNumbers: '', // 老顾客
        storeClientOldNumbers: '', // 复购率
        storeManNumbers: '', // 男顾客
        storeWomanNumbers: '', // 女顾客
        storeOtherNumbers: '', // 未知
        storeClientNumbers: '',
        hotClientNumbers: '',
        dateMap: [], //年月
        moneyMap: [], //数值
        hotTotalMoney: '',
        hotUsedNumber: '',
        hotCostMoney: '',
      },
      tYear:'', // 当年份
      seriesData: [],
      columnOption: {
        legend:{
          show:false
        },
        padding:[25,15,4,15],
        yAxis: {
          disabled:true,
          gridType: 'dash'
        },
        categories: [], 
        series: []
      },
      ringOption: {
        dataLabel:false,
        ringWidth:5,
        title: {
          name:'到店新老顾客',
          color: '#999999',
          fontSize: 12,
          offsetY:5,
        },
        subtitle: {
          name: '',
          color: '#999999',
          fontSize: 12,
          offsetY:8,
        },
        "series": []
      },
      sexRingOption: {
        dataLabel:false,
        ringWidth:5,
        title: {
          name:'到店顾客性别',
          color: '#999999',
          fontSize: 12,
          offsetY:5,
        },
        subtitle: {
          name: '',
          color: '#999999',
          fontSize: 12,
          offsetY:8,
        },
        "series": []
      },
      width: 300,
      height:150,
      isHaveStore:''
    }
  },
  // computed: {
  //   myInfo() {
  //     return this.$store.state.userInfo;
  //   }
  // },
  onShow () {
    this.tabNum = 0;
    this.getUserInfo();
    this.doHandleYear(); //获取当年份
  },
  methods: {
    doHandleYear(tYear) {
      let myDate = new Date();
      this.tYear = myDate.getFullYear();
    },
    // 切换顶部tab
    // 0到店付 1引流爆品
    // itemNum 1年 0月
    handelTabItem (item) {
      this.tabNum = item.index;
      let flag = this.itemNum == 0 ? 0 : 1;
      this.tabNum == 0 && this.analyzeOffline(flag);
      this.tabNum == 1 && this.analyzeHot(flag);
    },
    // 切换年月
    handelDate (idx) {
      this.itemNum = idx;
      this.tabNum == 0 && this.analyzeOffline(idx);
      this.tabNum == 1 && this.analyzeHot(idx);
    },
    getUserInfo () { // 获取用户信息  判断用户是否开通店铺
      uni.showLoading();
      PersonalCenter({}, res => {
        if (res.status == 0) {
          if (res.data.isHaveStore == 1) {
            this.isHaveStore = res.data.isHaveStore;
            this.analyzeOffline(0);
            uni.hideLoading();
          }
          uni.hideLoading();
          return;
        }
      });
    },
    // 点击当前图标区域
    getCurrentDataIndex (currentIndex) {
      if (currentIndex == -1) return;
      if (this.tabNum == 0) {
        let date = this.columnOption.categories[currentIndex];
        this.analyzeOffline(this.itemNum,date)
      }
      if (this.tabNum == 1) {
        let date = this.columnOption.categories[currentIndex];
        this.analyzeHot(this.itemNum,date)
      }
    },
    //到店付
    analyzeOffline (flag,date) {
      let params = {
        flag: flag,
      };
      if (date && flag == 0) {
        params['searchDay'] = this.tYear + '-' + date;
      }
      if (date && flag == 1) {
        params['searchMonth'] =date;
      }
      uni.showLoading();
      analyzeOffline(params, res => {
        if (res.status == 0) {
          this.manageForm = res.data;
          this.columnOption.categories = this.manageForm.dateMap;
          this.columnOption.series = [
            {
              name:'到店量',
              data:this.manageForm.moneyMap,
              color: '#136EF1',
              textColor:'#3F4572'
            }
          ];
          this.ringOption.series = [{
            name: "新顾客" + '　'+ this.manageForm.storeClientAddNumbers +"(占" + this.manageForm.storeClientAddRatio  + '%' + ')',
            data: this.manageForm.storeClientAddNumbers,
            color: '#287BF6',
            legendShape:'rect'
          },{
            name: "老顾客" + '　'+ this.manageForm.storeClientOldNumbers +"(占" + this.manageForm.storeClientOldRatio  + '%' + ')',
            data: this.manageForm.storeClientOldNumbers,
            color: '#FF5450',
            legendShape:'rect'
          }];
          this.sexRingOption.series = [{
            "name": "男顾客" + '　'+ this.manageForm.storeManNumbers +"(占" + this.manageForm.storeManRatio  + '%' + ')',
            "data": this.manageForm.storeManNumbers,
            "color": '#287BF6',
            "legendShape":'rect'
          }, {
            "name": "女顾客" + '　'+ this.manageForm.storeWomanNumbers +"(占" + this.manageForm.storeWomanRatio  + '%' + ')',
            "data": this.manageForm.storeWomanNumbers,
            "color": '#FF5450',
            "legendShape":'rect'
          }, {
            "name": "未知" + '　'+ this.manageForm.storeOtherNumbers +"(占" + this.manageForm.storeOtherRatio  + '%' + ')',
            "data": this.manageForm.storeOtherNumbers,
            "color": '#999999',
            "legendShape":'rect'
          }];
          this.manageForm = res.data;
          this.$refs['ringChart'].changeData('u-ring-canvas', this.ringOption);
          this.$refs['sexRingChart'].changeData('u-sexring-canvas', this.sexRingOption);
          this.$refs['columnChart'].changeData('u-column-canvas', this.columnOption);
          uni.hideLoading();
          return;
        }
        uni.hideLoading();
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
      });
    },
    
    //引流爆品
    async analyzeHot (flag,date) {
      uni.showLoading();
      let params = {
        flag: flag,
      };
      if (date && flag == 0) {
        params['searchDay'] =this.tYear + '-' + date;
      }
      if (date && flag == 1) {
        params['searchMonth'] = date;
      }
      analyzeHots(params,res => {
        if (res.status == 0) {
          // this.manageForm = await analyzeHots({flag: flag});
          this.manageForm = res.data;
          this.columnOption.categories = this.manageForm.dateMap;
          this.columnOption.series = [
            {
              name:'到店量',
              data:this.manageForm.moneyMap,
              color: '#FF5450',
              textColor:'#673635'
            }
          ];
          this.ringOption.series = [
            {
              name: "新顾客" + '　'+ this.manageForm.hotClientAddNumbers +"(占" + this.manageForm.hotClientAddRatio  + '%' + ')',
              data: this.manageForm.hotClientAddNumbers ,
              color: '#287BF6',
              legendShape:'rect'
            },
            {
              name: "老顾客" + '　'+ this.manageForm.hotClientOldNumbers +"(占" + this.manageForm.hotClientOldRatio  + '%' + ')',
              data: this.manageForm.hotClientOldNumbers ,
              color: '#FF5450',
              legendShape:'rect'
            },
            // {
            //   name: "复购率" + '　'+ this.manageForm.hotRatio + "(占" + this.manageForm.hotRatio + '%' + ')',
            //   data: this.manageForm.hotRatio,
            //   color: '#999999',
            //   legendShape:'rect'
            // }
          ];
          this.sexRingOption.series = [{
            "name": "男顾客" + '　'+ this.manageForm.hotManNumbers +"(占" + this.manageForm.hotManRatio  + '%' + ')',
            "data": this.manageForm.hotManNumbers,
            "color": '#287BF6',
            "legendShape":'rect'
          }, {
            "name": "女顾客" + '　'+ this.manageForm.hotWomanNumbers +"(占" + this.manageForm.hotWomanRatio  + '%' + ')',
            "data": this.manageForm.hotWomanNumbers,
            "color": '#FF5450',
            "legendShape":'rect'
          }, {
            "name": "未知" + '　'+ this.manageForm.hotOtherNumbers +"(占" + this.manageForm.hotOtherRatio  + '%' + ')',
            "data": this.manageForm.hotOtherNumbers,
            "color": '#999999',
            "legendShape":'rect'
          }];
          this.$refs['ringChart'].changeData('u-ring-canvas', this.ringOption);
          this.$refs['sexRingChart'].changeData('u-sexring-canvas', this.sexRingOption);
          this.$refs['columnChart'].changeData('u-column-canvas', this.columnOption);
          uni.hideLoading();
          return;
        }
        uni.hideLoading();
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
      })
    },
    //跳转店铺认证页面
    storeApprove () {
      uni.navigateTo({
        url: '/pages/storeManage/result'
      });
    }
  }
}
</script>

<style scoped lang="scss">
  .manage_analyze {
    min-height: calc(100vh - 50px);
    padding-bottom: 10rpx;
    // 顶部导航栏
		.topNavBox {
			width: 100%;
			background-color: #FFFFFF;
			height: 88rpx;
			line-height: 88rpx;
			box-shadow:-2px 4px 10px 0px rgba(78,78,78,0.09);
			.topNav {
				width: 70%;
				margin: auto;
				padding: 0 28rpx;
				.common-tab {
					&-text {
						&.active {
							&:after {
								top: 52rpx;
							}
						}
					}
				}
				.navItem　{
					margin: auto;
					text-align: center;
					font-size:30rpx;
				} 
			}
		}
		.manage-box {
			.selectListDiv {
				overflow: hidden;
				padding-top: 26rpx;
			}
			.selectListBox {
				float: right;
				margin-right: 25rpx;
				width:156rpx;
				height:44rpx;
				border-radius:22px;
				font-size: 24rpx;
			}
			.yearS {
				width: 50%;
				text-align: center;
				display: inline-block;
				line-height: 44rpx;
			}
			.yearStyle {
				background-color: #136EF1;
				color: #FFFFFF;
				border-top-left-radius: 15rpx;
				border-bottom-left-radius: 15rpx;
			}
			.monthStyle {
				background-color: #136EF1;
				color: #FFFFFF;
				border-top-right-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
			}
			.unlikeblue {
				border:1px solid rgba(19,110,241,1);
				color: #136EF1;
			}
			.unlikered {
				border:1px solid #FF5450;
				color: #FF5450;
			}
			.yearStyleRed {
				background-color: #FF5450;
				color: #FFFFFF;
				border-top-left-radius: 15rpx;
				border-bottom-left-radius: 15rpx;
			}
			.monthStyleRed {
				background-color: #FF5450;
				color: #FFFFFF;
				border-top-right-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
			}
		}
    // 用户数据
    .userData {
      // height: 350rpx;
      background-color: #FFFFFF;
      // 用户当天总收入
      .userData_top {
        height: 86rpx;
        margin: 0 15rpx;
        border-bottom: 2rpx solid rgba(225,225,225,1);
        line-height: 86rpx;
        .userData_top_r {
          display: initial;
          margin-left: 58rpx;
          .txt {
            font-size:28rpx;
            .money {
              display: inline;
              font-size: 40rpx;
            }
          }
        }
        .userData_top_l {
          float: right;
          font-size:24rpx;
          margin-right: 58rpx;
        }
      }
      // 各个状态收入
      .dataStatus {
        padding: 55rpx 0;
        .dataStatusList {
          .dataStatusItem {
            width: 33%;
            text-align: center;
            line-height: 50rpx;
            display: inline-block;
          }  
          .datastore {
            width: 49%;
            line-height: 50rpx;
            text-align: center;
            display: inline-block;
          }
          .datastore1 {
            width: 49%;
            line-height: 50rpx;
            vertical-align: top;
            margin-top: 30px;
            text-align: center;
            display: inline-block;
            .item_money1 {
              text {
                font-size:26rpx;
               color: #C2AC78;
              }
              font-size:42rpx;
              color:#C2AC78;
            }
          }
          .item_money {
            line-height: 50rpx;
            text {
              font-size:26rpx;
             color: #C2AC78;
            }
            font-size:42rpx;
            color:#C2AC78;
          }
          .item_status {
            font-size:30rpx;
            color:rgba(51,51,51,1);
          }
          .item_margin_top {
            margin-top: 25px;
          }
          .orderNum {
            font-size:22rpx;
            color:rgba(153,153,153,1);
          }
          .itemWire {
            // height: 93rpx;
            border-right: 1px solid rgba(225,225,225,1);
          }
        }
      }
    }
    .oldNewClient {
      margin: 20rpx 31rpx 0 31rpx;
      background-color: #FFFFFF;
      border-radius:12px;
    }
		.allAmountBox {
			overflow: hidden;
			.allAmount {
				margin-top: 30rpx;
				float: right;
				margin-right: 50rpx;
				font-size:24rpx;
				color:rgba(102,102,102,1);
				text {
					font-size: 42rpx;
					margin-right: 60rpx;
					font-weight:bold;
					color:rgba(51,51,51,1);
				}
			}
		}
    .genderClient {
      margin: 20rpx 31rpx 0rpx 31rpx;
      background-color: #FFFFFF;
      border-radius:12px;
    }
		.noDatas {
			text-align: center;
			margin-top: 20rpx;
      .storeTxt {
        font-size:38rpx;
        font-weight:500;
        color:rgba(51,51,51,1);
      }
      /* 下面的button按钮 */
      .uni-common-mt button {
        width: 687rpx;
        height: 70rpx;
        background: #434343;
        font-size:30rpx;
        font-weight: 500;
        color: rgba(246, 218, 153, 1);
        margin:21rpx auto;
      }
      .uni-common-mt{
        width: 100%;
        position:fixed;
        height: 112rpx;
        // bottom: 100rpx;
        bottom: var(--window-bottom) !important;
        background-color: #FFFFFF;
        border-top:2rpx solid #E1E1E1;
      }
		}
  }
  .noChart {
	  padding: 29.8%;
	  text-align: center;
    font-size:38rpx;
    font-weight:500;
    color:rgba(51,51,51,1);
  }
</style>
